<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://www.ablanxue.com/uploadfile/201510/14448232930886131/shuzi/jquery.min.js"></script>
<style>
	*{margin:0;padding:0;list-style: none;font-style: normal;}
	@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  10% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  20% {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
  }
  30% {
    -webkit-transform: translateY(-120px);
    transform: translateY(-120px);
  }
  40% {
    -webkit-transform: translateY(-160px);
    transform: translateY(-160px);
  }
  50% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
  }
  60% {
    -webkit-transform: translateY(-240px);
    transform: translateY(-240px);
  }
  70% {
    -webkit-transform: translateY(-280px);
    transform: translateY(-280px);
  }
  80% {
    -webkit-transform: translateY(-320px);
    transform: translateY(-320px);
  }
  90% {
    -webkit-transform: translateY(-360px);
    transform: translateY(-360px);
  }
  100% {
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  
}
div {
  width: 200px;
  height: 42px;
  line-height: 40px;
  overflow: hidden;
}
ul {
  height: 100%;
  width: 100%;
  /*-webkit-animation: scroll 10s infinite;*/
}
li {

    display: inline-block;
	font-size: 26px;
	font-style: normal;
	font-weight: bold;
	height: 40px;
  	width:40px;
	line-height: 40px;
	background-color: #da3b3e;
	color: #ffffff;
	text-align: center;
	background: linear-gradient(45deg, #ec6c49, #e24f67);
	border-radius: 50%;
	vertical-align: middle;
	overflow: hidden;
}
.box{
	width:40px;
	height:400px;
	-webkit-animation: scroll 1s infinite;
}
.box1{
	-webkit-animation: scroll 0.9s infinite;
}
.box2{
	-webkit-animation: scroll 0.8s infinite;
}
.box3{
	-webkit-animation: scroll 1.1s infinite;
}
.box4{
	-webkit-animation: scroll 1.2s infinite;
}
em {
    display: block;
    line-height: 40px;
  	height: 40px;
  	width:40px;
  	font-style: normal;
	font-weight: bold;
	font-size: 26px;
}
</style>
</head>
<body>
<div>
    <ul>
    	<li>
    		<div class="box">
    			<em>1</em>
	            <em>2</em>
	            <em>3</em>
	            <em>4</em>
	            <em>5</em>
	            <em>6</em>
	            <em>7</em>
	            <em>8</em>
	            <em>9</em>
	            <em>0</em>
    		</div>
    	</li>
    	<li>
    		<div class="box box1">
    			<em>1</em>
	            <em>2</em>
	            <em>3</em>
	            <em>4</em>
	            <em>5</em>
	            <em>6</em>
	            <em>7</em>
	            <em>8</em>
	            <em>9</em>
	            <em>0</em>
    		</div>
    	</li>
    	<li>
    		<div class="box box2">
    			<em>1</em>
	            <em>2</em>
	            <em>3</em>
	            <em>4</em>
	            <em>5</em>
	            <em>6</em>
	            <em>7</em>
	            <em>8</em>
	            <em>9</em>
	            <em>0</em>
    		</div>
    	</li>
    	<li>
    		<div class="box box3">
    			<em>1</em>
	            <em>2</em>
	            <em>3</em>
	            <em>4</em>
	            <em>5</em>
	            <em>6</em>
	            <em>7</em>
	            <em>8</em>
	            <em>9</em>
	            <em>0</em>
    		</div>
    	</li>
    	<li>
    		<div class="box box4">
    			<em>1</em>
	            <em>2</em>
	            <em>3</em>
	            <em>4</em>
	            <em>5</em>
	            <em>6</em>
	            <em>7</em>
	            <em>8</em>
	            <em>9</em>
	            <em>0</em>
    		</div>
    	</li>
        
    </ul>
</div>

<script>
	
</script>
</body>
</html>